<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>个人中心 - AI简历生成应用</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-gray-50 pb-20 pt-14">
    <!-- 顶部导航栏 -->
    <div class="bg-white shadow fixed top-0 left-0 right-0 z-10">
      <div
        class="h-14 flex items-center justify-center relative px-4 max-w-md mx-auto"
      >
        <h1 class="text-lg font-medium">个人中心</h1>
      </div>
    </div>

    <!-- 用户信息 -->
    <div class="bg-white shadow-sm">
      <div class="px-4 py-5">
        <div class="flex items-center">
          <div
            class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mr-3 text-xl font-bold text-purple-600"
          >
            张
          </div>
          <div>
            <h2 class="text-lg font-medium text-gray-900">张先生</h2>
            <p class="text-gray-600 text-sm mt-1">高级产品经理 · 4年经验</p>
          </div>
        </div>
        <div class="mt-4 flex items-center justify-between">
          <div class="text-sm text-gray-500">个人信息完善度</div>
          <div class="text-sm text-purple-600 font-medium">90%</div>
        </div>
        <div class="mt-2 bg-gray-200 rounded-full h-2">
          <div class="bg-purple-600 h-2 rounded-full w-11/12"></div>
        </div>
      </div>
    </div>

    <!-- 广告区 -->
    <div class="px-4 mt-4">
      <div
        class="bg-gradient-to-r from-purple-500 to-indigo-600 rounded-xl p-4 shadow"
      >
        <div class="flex items-center">
          <div class="flex-1">
            <h3 class="text-white font-medium text-lg">会员特惠</h3>
            <p class="text-purple-100 text-sm mt-1">
              限时特惠，享受不限次数优化服务
            </p>
            <a
              href="../service/detail.html?type=vip"
              class="inline-block mt-3 bg-white text-purple-600 px-3 py-1 rounded-full text-xs font-medium"
              >立即购买</a
            >
          </div>
          <div
            class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-8 w-8 text-white"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>

    <!-- 服务数据 -->
    <div class="px-4 mt-4">
      <div class="grid grid-cols-2 gap-4">
        <!-- 可用基础优化次数 -->
        <div class="bg-white rounded-xl shadow p-4">
          <div class="flex flex-col items-center">
            <div class="text-3xl font-medium text-purple-600 mb-2">2</div>
            <div class="text-sm text-gray-600">基础优化次数</div>
          </div>
        </div>

        <!-- 可用高级优化次数 -->
        <div class="bg-white rounded-xl shadow p-4">
          <div class="flex flex-col items-center">
            <div class="text-3xl font-medium text-purple-600 mb-2">1</div>
            <div class="text-sm text-gray-600">进阶优化次数</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 功能区 -->
    <div class="px-4 mt-4">
      <div class="bg-white rounded-xl shadow">
        <!-- 我的简历 -->
        <a
          href="../resume/list.html"
          class="flex items-center justify-between p-4 border-b border-gray-100"
        >
          <div class="flex items-center">
            <div
              class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-3"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5 text-purple-600"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                />
              </svg>
            </div>
            <div class="text-gray-900">我的简历</div>
          </div>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 text-gray-400"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
              clip-rule="evenodd"
            />
          </svg>
        </a>

        <!-- 我的订单 -->
        <a
          href="orders.html"
          class="flex items-center justify-between p-4 border-b border-gray-100"
        >
          <div class="flex items-center">
            <div
              class="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center mr-3"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5 text-amber-500"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
                />
              </svg>
            </div>
            <div class="text-gray-900">我的订单</div>
          </div>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 text-gray-400"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
              clip-rule="evenodd"
            />
          </svg>
        </a>

        <!-- 我的服务 -->
        <a
          href="services.html"
          class="flex items-center justify-between p-4 border-b border-gray-100"
        >
          <div class="flex items-center">
            <div
              class="w-10 h-10 bg-emerald-100 rounded-lg flex items-center justify-center mr-3"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5 text-emerald-500"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M13 10V3L4 14h7v7l9-11h-7z"
                />
              </svg>
            </div>
            <div class="text-gray-900">我的服务</div>
          </div>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 text-gray-400"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
              clip-rule="evenodd"
            />
          </svg>
        </a>

        <!-- 个人信息 -->
        <a href="info.html" class="flex items-center justify-between p-4">
          <div class="flex items-center">
            <div
              class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5 text-blue-500"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
                />
              </svg>
            </div>
            <div class="text-gray-900">个人信息</div>
          </div>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 text-gray-400"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
              clip-rule="evenodd"
            />
          </svg>
        </a>
      </div>
    </div>

    <!-- 设置区 -->
    <div class="px-4 mt-4">
      <div class="bg-white rounded-xl shadow">
        <!-- 退出登录 -->
        <a href="../login.html" class="flex items-center justify-between p-4">
          <div class="flex items-center">
            <div
              class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center mr-3"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5 text-red-500"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
                />
              </svg>
            </div>
            <div class="text-red-500">退出登录</div>
          </div>
        </a>
      </div>
    </div>

    <!-- 底部标签栏 -->
    <iframe
      src="../common/tabbar.html"
      class="fixed bottom-0 left-0 w-full h-16 border-none"
    ></iframe>
  </body>
</html>
